Bootstrap Snippet blog grid using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="postList">
                <div class="item1">
                    <div class="singlePost">
                        <a href="#">
                            <img src="https://dummyimage.com/800x400/aaa/fff" class="img-responsive" alt="">
                        </a>
                        <a href="#">
                            <h3 class="singlePost__h3">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h3>
                        </a>
                    </div>
                </div>
                <div class="item2">
                    <div class="singlePost">
                    <a href="#">
                        <img src="https://dummyimage.com/400x260/aaa/fff" class="img-responsive" alt="">
                    </a>
                    <a href="#">
                        <h3 class="singlePost__h3">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h3>
                    </a>
                </div>
                </div>
                <div class="item3">
                    <div class="singlePost">
                        <a href="#">
                            <img src="https://dummyimage.com/400x260/aaa/fff" class="img-responsive" alt="">
                        </a>
                        <a href="#">
                            <h3 class="singlePost__h3">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h3>
                        </a>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.postList{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .postList> div {
    background-color: #fff;
  }
  .postList .item1 {
    grid-column: 1 / 3;
    grid-row: span 2;
    background-color: #000;
  }
.singlePost .singlePost__h3{
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    margin-top: 5px;
    margin-bottom: 5px;
    color: #333;  
}
.img-responsive{
    max-width: 100%;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"blog grid"
Bootstrap 4.1.1 Snippet by SANTANU CHOWDHURY

Related: See More

Questions / Comments:

"blog grid" Bootstrap 4.1.1 Snippet by SANTANU CHOWDHURY

Related: See More

Questions / Comments:

"blog grid"
Bootstrap 4.1.1 Snippet by SANTANU CHOWDHURY